<template>
  <div id="projectHead2">
    <div class="btn-out2">
      <img @click="drawer = true" src="../../assets/img/shousuo.png" alt />
    </div>
    <div class="navs-fix">
      <ul class="navs">
        <li
          @click="navClick(v.id)"
          :class="navStatus==v.id?'liActive':''"
          v-for="(v,i) in navList"
          :key="i"
        >
          <img :src="navStatus!=v.id?v.iconC:v.icon" alt />
          <p>{{v.name}}</p>
        </li>
      </ul>
      <img @click="drawer = false" class="you" src="../../assets/img/youbian.png" alt />
    </div>
    <!-- 交易记录 -->
    <el-dialog width="1000px" :visible.sync="dealRecordStatus">
      <tradingRecord></tradingRecord>
    </el-dialog>
    <!-- 投注记录 -->
    <el-dialog width="1000px" :visible.sync="bettingRecordStatus">
      <bettingRecord></bettingRecord>
    </el-dialog>
    <!-- 划转 -->
    <el-dialog width="1000px" :visible.sync="transferStatus">
      <transfer></transfer>
    </el-dialog>
  </div>
</template>
<script>
import tradingRecord from '../tradingRecord/tradingRecord'
import bettingRecord from '../bettingRecord/bettingRecord'
import transfer from "../transfer/transfer"
import $ from "jquery";
export default {
  name: "projectHead2",
  data() {
    return {
      drawer: false,
      navStatus: -1,
      navList: [
        {
          icon: require("../../assets/img/OTCbai.png"),
          iconC: require("../../assets/img/OTCjianbian.png"),
          id: 0,
          name: "OTC"
        },
        {
          icon: require("../../assets/img/huazhuanbai.png"),
          iconC: require("../../assets/img/huazhuanjianbian.png"),
          id: 1,
          name: "划转"
        },
        {
          icon: require("../../assets/img/jilubai.png"),
          iconC: require("../../assets/img/jilujianbian.png"),
          id: 2,
          name: "交易记录"
        },
        {
          icon: require("../../assets/img/touzubai.png"),
          iconC: require("../../assets/img/touzu.png"),
          id: 3,
          name: "投注记录"
        },
        {
          icon: require("../../assets/img/bangzu.png"),
          iconC: require("../../assets/img/bangzujianbian.png"),
          id: 4,
          name: "帮助中心"
        },
        {
          icon: require("../../assets/img/xiazaibai.png"),
          iconC: require("../../assets/img/xiazaijianbian.png"),
          id: 5,
          name: "APP下载"
        },
      ],
      dealRecordStatus:false,//交易记录
      bettingRecordStatus:false,//投注记录
      transferStatus:false,//划转
    };
  },
  components: {
    tradingRecord,
    bettingRecord,
    transfer
  },
  watch: {
    dealRecordStatus(){
      this.dealRecordStatus==false?this.navStatus = -1:''
    },
    bettingRecordStatus(){
       this.bettingRecordStatus==false?this.navStatus = -1:''
    },
    transferStatus(){
      this.transferStatus==false?this.navStatus = -1:''
    },
    drawer() {
      if (this.drawer) {
        $(".navs-fix").animate(
          {
            right: "0"
          },
          300
        );
        $(".btn-out").animate(
          {
            right: "-80px"
          },
          300
        );
      } else {
        $(".navs-fix").animate(
          {
            right: "-77px"
          },
          300
        );
        $(".btn-out").animate(
          {
            right: "0"
          },
          300
        );
      }
    }
  },
  methods: {
    navClick(val) {
      this.navStatus = val;
     if(val==1){
        this.transferStatus=true
      }else{
        this.transferStatus=false
      }
      if(val==2){
        this.dealRecordStatus=true
      }else{
        this.dealRecordStatus=false
      }
      if(val==3){
        this.bettingRecordStatus=true
      }else{
        this.bettingRecordStatus=false
      }
    }
  }
};
</script>
<style lang='less' scope>
.btn-out2 {
  position: fixed;
  right: 0;
  top: 75%;
  z-index: 4;
  width: 60px;
  >img{
    width: 100%;
  }
}
#projectHead2 {
  .navs-fix {
    position: fixed;
    right: -77px;
    top: 200px;
    z-index: 5;
    > .you {
      position: absolute;
      bottom: -40px;
      left: 20px;
    }
    .navs {
      width: 77px;

      background-color: #fff;
      border-radius: 30px 0 0 30px;
      border: 1px solid #eee;
      overflow: hidden;
      > li {
        text-align: center;
        padding: 20px 0;
        cursor: pointer;
        p {
          margin-top: 5px;
          font-size: 14px;
          color: #a1b1b0;
        }
      }
      > .liActive {
        background-image: linear-gradient(#fff4e5, #f1d4ad);
        > p {
          color: #fff !important;
        }
      }
    }
  }
  .el-dialog__body{
        padding: 20px 20px !important
    }
}
</style>